.select2,
.select2-results__options,
.select2-dropdown input,
.select2-dropdown {
  font-size: 14px !important;
}

.select2-container--open {
  z-index: 9999999
}

.select2-search  input {
  padding: 2px !important;
  font-size: 14px !important;
}

.selection {
  display: flex;
  width: 100% !important;
  justify-content: stretch;
}

.selection .select2-selection.select2-selection--single {
  width: 100% !important;
  flex-grow: 1;
}

.select2-container .select2-selection--single,
.select2-selection.select2-selection--single {
  @apply input! w-full!;
  width: 100% !important;
  flex-grow: 1;
}


label .select2-selection.select2-selection--multiple,
label .select2-selection.select2-selection--single {
  border: 0 !important;
  margin: 0 !important;
}

.select2-selection.select2-selection--multiple {
  @apply input!;
  width: 100% !important;
  flex-grow: 1;
}



.select-sm .select2-selection.select2-selection--multiple,
.select-sm .select2-selection.select2-selection--sing2e {
  max-height: 32px;
}

.select2-contrast .select2-selection {
  @apply bg-base-200!;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single {
  @apply border border-base-300;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 5px;
}

.select2-dropdown {
  @apply bg-base-100! text-base-content!;
}
.select2-container--default .select2-results__option--selectable {
  @apply bg-base-100 text-base-content;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  @apply !bg-accent !text-accent-content;
}

.select2-container--default .select2-search--inline .select2-search__field {
  @apply px-2! py-1! bg-base-100! text-base-content! min-w-4!;
}

.select2-container--default .select2-selection--single {
  @apply bg-base-100! text-base-content!;
}

.select2-container--default.select2-contrast .select2-search--inline .select2-search__field,
.select2-container--defaultt.select2-contrast .select2-search--dropdown .select2-search__field  {
  @apply bg-base-100!;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  @apply !text-sm bg-base-100! text-base-content!;
  line-height: 20px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  @apply text-base-content! bg-base-100! border-base-300!;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  @apply text-base-content! bg-base-100! border-base-300!;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  @apply text-base-content! bg-base-100! border-base-300!;
}

/*
  If its appearing inside a modal we want to animate it
  to appear together with the modal animation
*/
#modal-background + .select2-container {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-duration: 300ms;
}